<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #f00;
            position: relative;
            margin: auto;
            background: url(https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100027210412/FocusFullshop/CkRqZnMvdDEvMjExMDUxLzM3LzI5MzgzLzc4ODk4Ni82MzllMTg5ZUU3MzQxZTQ0MS9mNDI1ZGVjMmIxMWU3MWVlLnBuZxIJNC10eV8wXzU1MAI47ot6QhMKD-WNjuehleeslOiusOacrBABQhEKDeenkuadgOS7tzY5OTkQAkIQCgznq4vljbPmiqLotK0QBkIKCgbkvJjpgIkQB1istdjQ9AI/cr/s/q.jpg);
            background-size: 100% 100%;
        }

        .empty,
        .range,
        .tips {
            width: 50px;
            height: 50px;
            background-color: #000;
            position: absolute;
        }

        .empty {
            left: 300px;
            box-shadow: 0 0 2px 2px orange;
        }

        .range {
            background-color: #ff0;
            bottom: 0;
            /* 用户选中 --- 不能选择 */
            user-select: none;
        }

        .tips {
            box-shadow: 0 0 2px 2px orange;
            background: url(https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100027210412/FocusFullshop/CkRqZnMvdDEvMjExMDUxLzM3LzI5MzgzLzc4ODk4Ni82MzllMTg5ZUU3MzQxZTQ0MS9mNDI1ZGVjMmIxMWU3MWVlLnBuZxIJNC10eV8wXzU1MAI47ot6QhMKD-WNjuehleeslOiusOacrBABQhEKDeenkuadgOS7tzY5OTkQAkIQCgznq4vljbPmiqLotK0QBkIKCgbkvJjpgIkQB1istdjQ9AI/cr/s/q.jpg);
            background-size: 500px 500px;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="empty"></div>
        <div class="tips"></div>
        <div class="range">11</div>
    </div>

    <script>

        // 分析
        //    挖空的位置和提示框的位置上对齐  top值是一样的
        //    滑块移动的时候，提示框也会移动
        //    挖空的位置是随机的

        // 功能
        //    1 随机挖空的位置
        //    2 实现拖拽

        // 小bug
        //   拖拽的时候    鼠标会触发默认的选中事件(鼠标变成圆圈禁用的状态)   user-select:none
        //   没有拖动的时候，点击的时候也会刷新位置     加一个判断(判断是否拖动---位置是否发生改变)


        var oBox = document.querySelector('.box');
        var oRange = oBox.querySelector('.range');
        var oTips = oBox.querySelector('.tips');
        var oEmpty = oBox.querySelector('.empty');

        var maxWidth = oBox.clientWidth - oEmpty.offsetWidth;
        var maxHeight = oBox.clientHeight - oEmpty.offsetHeight;


        // 随机位置
        randEmpty();


        // 拖拽
        oRange.addEventListener('mousedown', function (e) {
            e = e || event;
            // 获取鼠标在盒子中的位置
            var gapX = e.offsetX;
            document.addEventListener('mousemove', mousemoveHandle);
            function mousemoveHandle(e) {
                e = e || event;
                var x = e.x - oBox.offsetLeft - gapX;
                if (x < 0) x = 0;
                if (x > maxWidth) x = maxWidth;
                // 移动滑块
                oRange.style.left = x + 'px';
                // 移动提示框
                oTips.style.left = x + 'px';
            }

            document.addEventListener('mouseup', mouseupHandle)
            function mouseupHandle() {
                // 移除move事件
                document.removeEventListener('mousemove', mousemoveHandle);

                // 判断  误差     有移动
                if (Math.abs(oTips.offsetLeft - oEmpty.offsetLeft) <= 5 && oTips.offsetLeft > 0) {
                    alert('ok');
                    // location.href = '百度'
                } else {
                    // alert('err')
                    oRange.style.left = 0;
                    oTips.style.left = 0;
                    randEmpty();
                }
                document.removeEventListener('mouseup', mouseupHandle);
                // console.log(1);
            }
        })


        // 随机left和top的位置(left尽量靠右边，top不要在最下面)
        function randEmpty() {
            // left尽量靠右边  假设最小值为200
            var _left = rand(200, maxWidth);

            // top不要在最下面  多减了100
            var _top = rand(0, maxHeight - 100);
            // 挖空的盒子随机位置
            oEmpty.style.left = _left + 'px';
            oEmpty.style.top = _top + 'px';
            // 提示框跟挖空的盒子上端对齐
            oTips.style.top = _top + 'px';
            // 设置背景图的位置
            oTips.style.backgroundPosition = `-${_left}px -${_top}px`;
        }




        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }


    </script>
</body>

</html>